<template>
  <div class="patient-number-date" data-label="预约信息">
    <div class="patient-number-date-inside">
      <div class="header">
        <div class="left item">
          <img
              alt="左侧"
              src="@/components/assets/images/design/1-12.webp"
          />
        </div>
        <div class="middle item">患者预约信息</div>
        <div class="right item">
          <img
              alt="右侧"
              src="@/components/assets/images/design/1-12.webp"
          />
        </div>
      </div>
      <div class="patient-number-wrap">
        <el-row class="patient-number-area">
          <template v-if="(takeNumberList?.state)&&!!(filterTakeList?.length)">
            <template v-for="item in filterTakeList">
              <el-col :span="24" class="number-item">
                <div class="item-childs item-top">
                  <el-col :span="12">
                    <div class="patient-number-item">
                      <div class="left">
                        日期：
                      </div>
                      <div class="right">
                        {{ dateChange(item?.tradeTime) }}&nbsp;{{ dateType(item?.medAmPm || 1) }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="patient-number-item">
                      <div class="left">
                        医生：
                      </div>
                      <div class="right">
                        {{ item?.doctName }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="patient-number-item">
                      <div class="left">
                        科室：
                      </div>
                      <div class="right">
                        {{ item?.deptName }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12" v-if="false">
                    <div class="patient-number-item">
                      <div class="left">
                        就诊序号：
                      </div>
                      <div class="right">
                        {{ item?.appoNo }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="patient-number-item prive">
                      <div class="left">
                        挂号金额：
                      </div>
                      <div class="right">
                        ¥{{ item?.regFee || '0.0' }}
                      </div>
                    </div>
                  </el-col>
                </div>
                <div class="item-childs item-middle">
                  <div class="left" @click="handlePopup(item)">
                    取消
                  </div>
                  <div class="right" @click="handleSure(item)">
                    确定
                  </div>
                </div>
              </el-col>
            </template>
          </template>
          <template v-else>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {Popup} from 'vant';
import {translateTime} from '@/utils/common'

export default {
  name: 'RegisterInfo',

  componentName: "RegisterInfo",

  components: {
    Popup
  },

  data() {
    return {
      show: false,
    }
  },

  computed: {
    takeNumberList() {
      return this.$store.getters['DRCbiz/getTakeNumberList']
    },

    // 日期格式转化
    dateChange() {
      return function (info) {
        return translateTime(info)
      }
    },

    //日期上午&下午
    dateType() {
      return function (info) {
        return parseInt(info) === 1 ? '上午' : '下午'
      }
    },

    // 筛选数据允许取号
    filterTakeList() {
      let {state, result} = this.takeNumberList;
      return this.$lodash.filter(result, [state, 0])
    }

  },

  mounted() {

  },

  methods: {
    handlePopup(row) {
      this.$emit('handlePopup', row)
    },

    handleSure(row) {
      this.$emit('handleSureReservationInfo', row)
    }
  },
}

</script>

<style scoped lang="scss">
@import "assets/style";
</style>